<script>
import { defineComponent } from 'vue'
import FanImage from '../image/image.vue'
import { createNamespace, saveImage, dialog } from '../utils'

export default defineComponent({
  name: createNamespace('ContactPanel')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true
  },
  components: { FanImage },
  props: {
    customStyle: [Object, String],
    phone: String,
    picture: String,
    time: String,
    timeStyle: String,
    phoneLabel: {
      type: String,
      default: '客服电话'
    },
    pictureLabel: {
      type: String,
      default: '客服微信'
    },
    // 图片联系方式的说明文案
    pictureRemark: {
      type: String,
      default: '1.截屏或长按保存二维码\n2.用微信从相册选图 扫一扫识别'
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'large'].includes(value)
      }
    },
    bg: {
      type: String,
      default: '#fff'
    }
  },
  setup(props) {

    const picLongpress = () => {
      // #ifdef APP-PLUS
      dialog({
        title: '是否保存该图片？',
        showCancel: true
      }).then(() => {
        saveImage(props.picture)
      })
      // #endif
    }

    return { picLongpress }
  }
})
</script>

<template>
  <div class="fan-contact-panel" :class="{ 'fan-contact--large': size === 'large' }">
    <div v-if="time" :style="timeStyle" class="fan-multi-ellipsis--l2 fan-contact__time">客服工作时间：{{ time }}</div>

    <div v-if="!phone && !picture" class="fan-contact__cell" :style="{ background: bg }">
      客服有点高冷，木有给联系方式呢！
    </div>

    <div v-if="phone" class="fan-contact__cell fan-contact__phone" :style="{
    background: bg,
    marginBottom: !picture ? '0' : size === 'large' ? '18px' : '12px'
  }">
      {{ phoneLabel }}：<span selectable user-select>{{ phone }}</span>
    </div>
    <div v-if="picture" class="fan-contact__cell" :style="{ display: 'inline-block', width: '100%', background: bg }">
      <div v-if="pictureLabel" class="fan-contact--mg">{{ pictureLabel }}：</div>
      <div v-if="pictureRemark" class="fan-contact__remark fan-contact--mg">{{ pictureRemark }}</div>
      <FanImage :src="picture" mode="widthFix" :width="size === 'large' ? '100%' : '85%'" showMenuByLongpress
        style="display:inline-block;" @longpress="picLongpress" />
    </div>
  </div>
</template>

<style lang="less">
.fan-contact {
  &-panel {
    line-height: 1.4;
  }

  &--mg {
    margin-bottom: 6px;
  }

  &--large {
    .fan-contact__cell {
      padding: 18px 24px;
      border-radius: 8px;
    }
  }

  &__time {
    line-height: 24px;
    font-size: 14px;
    padding: 4px 12px;
    // color: var(--fan-primary-color);
    color: #f7931e;
    word-break: break-all;
    margin: -24px -12px 24px;
    background: var(--fan-light-primary-color);
  }

  &__cell {
    font-size: 16px;
    color: #1f2229;
    font-weight: var(--fan-text-mbold);
    padding: 14px 12px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  &__remark {
    font-size: 14px;
    color: #454952;
    line-height: 1.83;
    font-weight: normal;
    white-space: pre-wrap;
  }
}
</style>
